<template>
  <div>
    <div class="header">
      <div class="box">
        <nav>
          <span>HI,欢迎来大麦[</span>
          <router-link class="active" to="">登录</router-link>
          <router-link class="active" to="">注册</router-link>]
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              我的大麦<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </nav>
      </div>
      <div class="box">
        <nav>
          <router-link class="active" to="">大麦网微信</router-link>
          <router-link class="active" to="">手机版</router-link>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              客户服务<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              网站导航<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <router-link class="active" to="">English</router-link>
        </nav>
      </div>
    </div>
    <hr>
  </div>
</template>

<script>
export default {
  name: "headers_zm",
  data() {
    return {

    }
  },
  methods: {

  },
  components: {

  }
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  color: black;

  /*吸顶效果*/
  /* position: sticky;
        position: -webkit-sticky;    !*兼容 -webkit 内核的浏览器*!
        top: 0px;                    !*必须设一个值，否则不生效*!*/

}

.box {
  display: flex;
  align-items: center;
}

nav {
  display: flex;
  align-items: center;
  margin: 0px 40px;
  font: 16px Arial, Helvetica, sans-serif;
}

.active {
  pointer-events: none;
  /* opacity: 1; */
  margin: 0 5px;
  color:black;
  list-style: none;
  font-weight: 500;
}

.contents {
  display: flex;
  justify-content: center;
}

.content {
  display: flex;
  width: 1400px;
  height: 1400px;
  /*background-color: #f0f2f3;*/
}

.el-dropdown-link {
  cursor: pointer;
  padding: 0 10px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
img{
  width: 100px;
  height: 50px;
  margin-left: 60px;
}
</style>

